<template>
	<view>
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">图片列表</block>
		</cu-custom>
		
		<!-- 搜索栏 -->
		<uni-search-bar style="background-color: transparent;" @confirm="search1" @cancel="cancel"></uni-search-bar>
		<!-- 图片列表 -->
		<view class="cu-list menu-avatar">
			<view class="cu-item" :class="modalName=='move-box-'+ item.id?'move-cur':''" v-for="(item,index) in images" :key="index" :data-fileid="item.id"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + item.id" @tap="showImage">
				<view class="cu-avatar radius lg" :style="[{backgroundImage:'url('+ item.url+')'}]"></view>
				<view class="content">
					<view class="text-grey">{{item.fileTitle}}</view>
					<view class="text-gray text-sm ellipsis">
						<text class="cuIcon-infofill text-red  margin-right-xs"></text>{{item.fileRemark?item.fileRemark:item.fileName}}</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.updateTime}}</view>
					<view class="cu-tag round bg-grey sm">{{item.uploadsName}}</view>
				</view>
				<view class="move">
					<view class="bg-grey" :data-fileid="item.id" :data-index="index" @tap.stop="edit">修改</view>
					<view class="bg-red" :data-fileid="item.id" :data-index="index" @tap.stop="del">删除</view>
				</view>
			</view>
		</view>
		
		<!-- 加载按钮 -->
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-grey lg" @tap="load">加载更多</button>
			<!-- <button class="cu-btn bg-red margin-tb-sm lg">嫣红</button> -->
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	export default {
		components:{uniSearchBar},
		computed:mapState(['userName','pwd','hasLogin','roles','server']),
		data() {
			return {
				isBack:false,
				backParam:{},
				images:[],
				page:0,
				size:20,
				search:'',
				lastTime:'',
				sort:'updateTime,desc',
				listTouchStart:0,
				listTouchStartY:0,
				listTouchDirection:null,
				modalName:null,
				xx: null
			}
		},
		methods:{
			reload(){
				var serverUrl=this.server.url;
				this.page=0;
				this.lastTime='';
				uni.request({
					url: serverUrl + 'sysFile/app/imagePage',
					method: 'POST',
					sslVerify: false,
					header: {
						'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
					},
					data: {
						userName : this.userName,
						page : this.page,
						size : this.size,
						search : this.search,
						next: false,
						sort : this.sort
					},
					success: res => {
						var result=res.data.content;
						//console.log(result);
						this.images=result.map(item=>{
							item.url= serverUrl +'sysFile/app/download3?fileUuid='+item.fileUuid;
							return item;
						});
						this.pageRecodes=result.length;
						//记录第1条记录的时间,以防止后面拉取记录时，页面数据混乱
						if(result.length>0){
							this.lastTime=result[0].updateTime; 
						}
					}
				});
			},
			load(){
				var serverUrl=this.server.url;
				this.page++;
				uni.request({
					url: serverUrl + 'sysFile/app/imagePage',
					method: 'POST',
					sslVerify: false,
					header: {
						'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
					},
					data: {
						userName : this.userName,
						page : this.page,
						size : this.size,
						search : this.search,
						lastTime: this.lastTime,
						sort : this.sort
					},
					success: res => {
						var result=res.data.content;
						var list=this.images;
						if(result.length>0){
							result.map(item =>{
								item.url= serverUrl +'sysFile/app/download3?fileUuid='+item.fileUuid;
								list.push(item);
							});
							this.images=list;
						}else{
							this.page--;
							uni.showToast({
								title: '没有更多的图片了...',
								icon: 'none'
							});
						}
					}
				});
			},
			search1(e){
				this.search=e.value;
				this.reload();
			},
			cancel(){
				if(this.search==''){
					return;
				}
				this.search='';
				this.reload();
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX;
				this.listTouchStartY = e.touches[0].clientY;
			},
					
			// ListTouch计算方向
			ListTouchMove(e) {
				var flag=Math.abs(e.touches[0].pageX-this.listTouchStart)-Math.abs(e.touches[0].clientY-this.listTouchStartY)>0;
				this.listTouchDirection =flag && (e.touches[0].pageX - this.listTouchStart <-20) ?'left' : 'right' ;
			},
					
			// ListTouch计算滚动
			ListTouchEnd(e) {
				//console.log(e.touches[0].pageX);
				if(this.modalName == e.currentTarget.dataset.target){
					this.xx=false;
				}else{
					this.xx=true;
				}
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null;
				}
				this.listTouchDirection = null
				
			},
			showImage(e){
				if(this.xx){
					var fileid=e.currentTarget.dataset.fileid;
					uni.navigateTo({
						url: './image?fileid='+fileid
					});
				}
			},
			edit(e){
				var fileid=e.currentTarget.dataset.fileid;
				var index=e.currentTarget.dataset.index;
				var flag=false;
				this.roles.map(item=>{
					if(item == 'ROLE_MANAGER'){
						flag=true;
					}
				});
				if(!flag && this.images[index].uploadsUsername!=this.userName){
					uni.showToast({
						title: '你没有此文件的修改权限！',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: './edit?fileid='+fileid+'&index='+index
				});
			},
			del(e){
				var serverUrl=this.server.url;
				var fileid=e.currentTarget.dataset.fileid;
				var index=e.currentTarget.dataset.index;
				var flag=false;
				this.roles.map(item=>{
					if(item == 'ROLE_MANAGER'){
						flag=true;
					}
				});
				if(!flag && this.images[index].uploadsUsername!=this.userName){
					uni.showToast({
						title: '你没有此文件的删除权限！',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '对话框',
					content: '确定要删除这张图片吗？',
					cancelText: '退出',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: serverUrl + 'app/delete',
								method: 'GET',
								sslVerify: false,
								data: {id:fileid,userName:this.userName,pwd:this.pwd},
								success: res => {
									this.images.splice(index,1);
								}
							});
						}
					}
				})
			}
		},
		onLoad() {
			if(!this.hasLogin){
				uni.redirectTo({
					url:'./login'
				});
				return;
			}
			
			this.reload();
		},
		onShow() {
			// 如从修改页面返回,重新读取修改的那条记录
			if(this.isBack&&this.backParam.method=='edit'){
				var index=this.backParam.index;
				var fileid=this.backParam.id;
				var serverUrl=this.server.url;
				uni.request({
					url: serverUrl + 'app/findSysFileById',
					method: 'GET',
					sslVerify: false,
					data: {id:fileid},
					success: res => {
						var result=res.data;
						result.url=serverUrl +'sysFile/app/download3?fileUuid='+result.fileUuid;
						this.$set(this.images,index,result);
					}
				});
			}
		}
		
	}
</script>

<style>
</style>
